import React from 'react';
import {Form, Input, Button, Select, Table, Popover, Row, Col, notification } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

let List = React.createClass({
  contextTypes: {
    router: React.PropTypes.object
  },
  getInitialState() {
    return {
      data:[],
      selectedRowKeys: [],
      ladderList:[],
      pagination:{
        pageSize: 5,
        current: 1
      }
    }
  },
  componentDidMount(){
    this.handleSearch();
  },
  fetch(){
    let forms = this.props.form.getFieldsValue();
    let page = this.state.pagination.current;
    let param = Object.assign({},{currentPage:page, pageSize:5 }, forms);
    let _me = this;
    Utils.sendAjax({
      url: '/cost/list',
      data:JSON.stringify(param),
      callback:(result) => {
        if (result.code === '200') {
          _me.setState({
            data: result.data,
            pagination: result.page
          });

        } else {
          notification.error({message: result.message});
        }
      }
    });
  },
  rowKey(data) {
    return data.id;
  },
  add(){
    this.context.router.push('/landlord/HouseDecoration/chargeManage/chargeAdd');
    console.log('this.context.router',this.context.router);
  },
  getLadderList(costTypeId){
    Utils.sendAjax({
      url: '/cost/ladder/'+costTypeId,
      callback:(result) => {
        if (result.code === '200') {
          this.setState({
            ladderList: result.data,
          });

        } else {
          notification.error({message: result.message});
        }
      }
    });
  },
  handleTableChange(pagination) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch();
  },

  handleSearch(){
    this.setState({
      pagination : {
        current : 1
      }
    });
    this.fetch();
  },
  //列表渲染
  listRender(current){
    let forms = this.props.form.getFieldsValue();
    let pager = {};
    pager.currentPage = current;
    this.setState({
      pagination: pager,
    });
    let param = Object.assign({}, forms, pager);
    this.fetch(param);
  },
  render () {

    const columns = [{
      title: '收费项名称',
      dataIndex: 'costName',
    }, {
      title: '计费分类',
      dataIndex: 'classify',
      render: (text, record) => {
        let classifyText = '';
        if(record.classify == 1){
          classifyText = '固定'
        }
        if(record.classify == 2){
          classifyText = '仪表'
        }

        return (
          <span>{classifyText}</span>
        );
      }
    }, {
      title: '计费方式',
      dataIndex: 'chargeType',
      render: (text, record) =>{
        return (
          record.chargeType == 1? '正常收费':'阶梯收费'
        );
      }
    }, {
      title: '单价/元',
      dataIndex: 'price',
      render:(text, record) =>{
        let ladderList = this.state.ladderList;
        let content;
        let ladderBox;
        ladderBox = ladderList.map((item) =>{
          return (
            <Row key={`item-${item.id}`}>
              <Col span={6}>
                {item.ladderStart}
              </Col>
              <Col span={6}>
                {item.ladderEnd}
              </Col>
              <Col span={6}>
               ￥{item.price}
              </Col>
              <Col span={6}>
                 {item.status == 1?'启用':'禁用'}
              </Col>
            </Row>
          );
        });
        content = (
          <div style={{minWidth:300}}>
            <Row>
              <Col span={6}>
                阶梯开始
              </Col>
              <Col span={6}>
                阶梯结束
              </Col>
              <Col span={6}>
                单价
              </Col>
              <Col span={6}>
                状态
              </Col>
            </Row>
            {ladderBox}
          </div>
        );

        return (
          record.chargeType == 2 ?
            <Popover placement="right" content={content} title="阶梯收费详情" trigger="click">
              <a onClick={this.getLadderList.bind(this, record.id)}>阶梯收费</a>
            </Popover>
            : record.price);
      }
    }, {
      title: '单位',
      dataIndex: 'unit',
      render: (text, record) =>{
        let unitText = '';
        if(record.unit == 1){
          unitText = '度'
        }
        if(record.unit == 2){
          unitText = '吨'
        }
        if(record.unit == 3){
          unitText = '立方'
        }
        if(record.unit == 4){
          unitText = '平方'
        }
        if(record.unit == 5){
          unitText = '元'
        }
        console.log(unitText);
        return (
          <span>{unitText}</span>
        );
      }
    },
    //  {
    //  title: '操作',
    //  render: (text, record) => {
    //    return(
    //      record.status == 1?
    //        <a>禁用</a>
    //        :<a>启用</a>
    //    );
    //  }
    //
    //}
    ];

    const { getFieldProps } = this.props.form;
    return (
      <div>
        <div className="search-bar">
          <Form inline>
            <FormItem label="收费项名称">
              <Input {...getFieldProps('costName',{ })} placeholder="收费项名称"/>
            </FormItem>
            <FormItem label="分类">
              <Select {...getFieldProps('classify',{ initialValue: '0' })} placeholder="请选择" style={{width: 180}}>
                <Option value="0">全部</Option>
                <Option value="1">固定</Option>
                <Option value="2">仪表</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" onClick={this.handleSearch}>查询</Button>
            </FormItem>
          </Form>
        </div>
          <div style={{ marginBottom: 16 }}>
            <Button type="primary" onClick={this.add}>添加</Button>
          </div>
          <Table rowKey={this.rowKey}
                 dataSource={this.state.data}
                 columns={columns}
                 pagination={this.state.pagination}
                 onChange={this.handleTableChange}
          />
        </div>
    );
  }
});

List = Form.create()(List);
export default List
